

Ext.define('KitchenSink.view.button.SegmentedButtonsController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.segmented_buttons',

    toggleDisabled: function (checkbox, checked) {
        var view = this.getView(),
            stateFn = checked ? 'disable' : 'enable',
            buttons = view.query('segmentedbutton');

        Ext.each(buttons, function (btn) {
            btn[stateFn]();
        });
    },
	
	getMeWidth: function(width) {
		var WIDTH = width || 700;
		return WIDTH;
	}
});


/**
 * Demonstrates usage of an accordion layout.
 */
Ext.define('KitchenSink.view.layout.Accordion', {
    extend: 'Ext.panel.Panel',
    xtype: 'layout_accordion',

    title: 'Accordion Layout',
    layout: 'accordion',
    width: 700,
    height: 500,
    defaults: {
        bodyPadding: 10
    },

    items: [{
        title: 'Accordion Item 1',
		xtype: 'panel',
		bodyPadding: 0,
        //html: 'Empty'
		items: [
			{
				xtype: 'com_wxg_vertical_segmented_buttons'
			}
		]
    }, {
        title: 'Accordion Item 2',
        html: 'Empty'
    }, {
        title: 'Accordion Item 3',
        html: 'Empty'
    }, {
        title: 'Accordion Item 4',
        html: 'Empty'
    }, {
        title: 'Accordion Item 5',
        html: 'Empty'
    }]
});

Ext.define('com.wxg.view.button.VerticalSegmentedButtons', {
    extend: 'Ext.Container',
    xtype: 'com_wxg_vertical_segmented_buttons',
    controller: 'segmented_buttons',

    layout: 'center',

    items: [{
		xtype: 'segmentedbutton',
		width: 700,
		vertical: true,
		items: [{
			text: 'Option One'
		}, {
			text: 'Option Two',
			pressed: true
		}, {
			text: 'Option Three'
		}]
	}]
});



Ext.onReady(function(){
	Ext.themeName = 'classic';
	/*var viewBorderLayoutDemo = Ext.create({
		xtype: 'layout-border',
		x: 20, 
		y: 20,
		renderTo: Ext.getBody()
	});*/
	// vertical-segmented-buttons
	/*var vertical_segmented_buttons = Ext.create({
		xtype: 'vertical-segmented-buttons',
		x: 80,
		y: 20,
		renderTo: Ext.getBody()
	});*/
	var viewBorderLayoutDemo = Ext.create({
		xtype: 'layout_accordion',
		x: 20, 
		y: 20,
		renderTo: Ext.getBody()
	});
});

